<template>
    <div id='customer-quota'>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item >首页</el-breadcrumb-item>
          <el-breadcrumb-item>风控管理</el-breadcrumb-item>
          <el-breadcrumb-item>客户额度管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <div class="header-top">
                <div class="header-item">
                  <div class="header-item-left mr24">姓名:</div>
                  <div class="header-item-right">
                      <el-input v-model="custName" placeholder="请输入姓名" clearable ></el-input>
                  </div>
                </div>
                <div class="header-item">
                    <div class="header-item-left">手机号:</div>
                    <div class="header-item-right">
                        <el-input v-model="custTell" placeholder="请输入手机号" clearable ></el-input>
                    </div>
                </div>
                <div class="header-item" >
                    <div class="header-item-left">证件号:</div>
                    <div class="header-item-right">
                        <el-input v-model="custCertificates" placeholder="请输入证件号" clearable  ></el-input>
                    </div>
                </div>
                <div class="header-item ">
                  <div class="header-item-left mr24">放款次数:</div>
                  <div class="header-item-right header-item-right1">
                      <el-input v-model="custChannelId" placeholder="请输入次数或者范围(如: 2-5)" clearable ></el-input>
                  </div>
                </div>
                <div class="header-item">
                  <div class="header-item-left mr24">历史最长逾期天数:</div>
                  <div class="header-item-right header-item-right1">
                      <el-input v-model="historyOverdueDay" placeholder="请输入天数或者范围(如: 2-5)" clearable ></el-input>
                  </div>
                </div>
                <div class="header-button mr24">
                  <el-button type="primary" @click="search">搜索</el-button>
                </div>
                <div class="header-button">
                  <el-button type="plain" @click="clearFn">取消</el-button>
                </div>
            </div>
          </el-card>
          <el-card class="box-card box-card1">
              <div class="header-button1">
                  <div class="btn-l">
                      <el-button type="plain" @click="refresh">刷新<i class="el-icon-refresh el-icon--right"></i></el-button>
                  </div>
                  <div class="btn-r">
                      <template v-if="isShowBtn">
                          <el-button type="danger"  @click="batchProcessing">批量处理</el-button>
                      </template>
                      <template v-else>
                        <el-button type="info" disabled  >批量处理</el-button>
                      </template>
                  </div>
              </div>
              <el-table
                :data="tableData"
                v-loading="loading"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="name"
                  label="姓名"
                  min-width="120"
                  :formatter="ccn"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="phone"
                  align="center"
                  min-width="130"
                  :formatter="ccn"
                  label="手机号">
                </el-table-column>
                <el-table-column
                  prop="idCard"
                  align="center"
                  :formatter="ccn"
                  min-width="190"
                  label="证件号">
                </el-table-column>
                <el-table-column
                  prop="lendCount"
                  :formatter="ccn"
                  align="center"
                  label="放款次数">
                </el-table-column>
                <el-table-column
                  prop="overdueCount"
                  align="center"
                  :formatter="ccn"
                  label="逾期次数">
                </el-table-column>
                <el-table-column
                  prop="lendAmount"
                  align="center"
                  :formatter="ccn"
                  label="借款金额">
                </el-table-column>
                <el-table-column
                  prop="lendRealAmount"
                  align="center"
                  :formatter="ccn"
                  label="放款金额">
                </el-table-column>
                <el-table-column
                  prop="maxOverdueDays"
                  align="center"
                  :formatter="ccn"
                  label="历史最长逾期">
                </el-table-column>
                
                <el-table-column
                  align="center"
                  min-width="130"
                  label="操作">
                  <template slot-scope="scope">
                      <el-button type="text" size="mini" icon="el-icon-search"  @click.native.prevent="showData(scope.row)">记录</el-button>
                      <el-button
                        class="red"
                        @click.native.prevent="addBlacklist(scope.row)"
                        type="text"
                        size="mini">
                        提/降额
                      </el-button>
                     
                  </template>
                </el-table-column>
              </el-table>
              <div class="elpa">
                <el-pagination 
                  v-show="tableData.length" 
                  class="pan"  
                  @current-change="handleCurrentChangeone" 
                  :current-page="pageIndex"  
                  layout="total, prev, pager, next, jumper" 
                  :pager-count="5"
                  :total="total" 
                  :background="true">
                </el-pagination>  
              </div>
              
          </el-card>

           <el-dialog
            title="记录"
            :visible.sync="show_modal_data"
            width="40%">
            <div class="add">
                <el-table
                    class="el-table1"
                    :data="tableDataList"
                    v-loading="loading1"
                    stripe
                    style="width: 100%;height:528px;overflow-y:scroll;">
                    <el-table-column
                      prop="operatorName"
                      label="操作人"
                      :formatter="ccn"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      prop="operatorTime"
                      align="center"
                      :formatter="time"
                      min-width="178"
                      label="操作时间">
                    </el-table-column>
                    <el-table-column
                      prop="remarks"
                      align="center"
                      :formatter="ccn"
                      label="提/降额">
                    </el-table-column>
                    <el-table-column
                      prop="amount"
                      align="center"
                      :formatter="ccn"
                      label="更改后额度">
                    </el-table-column>
                  </el-table>
            </div>
          </el-dialog>
          <!-- 单个处理 -->
          <el-dialog
            title="提/降额"
            :visible.sync="show_modal_drop_lift"
            width="40%">
            <div class="add">
                <div class="dia-item">
                    <div class="header-item-left">信用额度:</div>
                   <div class="header-item-right">
                       <el-input v-model="creditlimit" placeholder="请谨慎输入" clearable></el-input>
                   </div> 
                </div>
                <div class="dia-item">
                    <p>注意 : 只支持100的整数倍提额,降额加"-"</p>
                </div>
                <div class="dia-footer">
                    <el-button class="fr" @click="diaClose">取 消</el-button>
                    <el-button class="fr1" type="primary" @click="submitAmount">确 定</el-button>
                </div>
            </div>
          </el-dialog>
           <!-- 批量处理 -->
           <el-dialog
            title="提/降额"
            :visible.sync="show_modal_drop_lifts"
            width="40%">
            <div class="add">
                <div class="dia-item">
                    <div class="header-item-left">信用额度:</div>
                   <div class="header-item-right">
                       <el-input v-model="creditlimits" placeholder="请谨慎输入" clearable></el-input>
                   </div> 
                </div>
                <div class="dia-item">
                    <p>注意 : 只支持100的整数倍提额,降额加"-"</p>
                </div>
                <div class="dia-footer">
                    <el-button class="fr" @click="diaCloses">取 消</el-button>
                    <el-button class="fr1" type="primary" @click="submitAmounts" :loading="allLoading">确 定</el-button>
                </div>
            </div>
          </el-dialog>
    </div>

</template>
<script>
    import  { mapGetters, mapActions }  from 'vuex'
    import imagesView from '../components/ImagesView.vue'
    import { riskControllerApi } from '../api/api'
    import { convertRequestURL } from '../utils/utils'
    import moment from 'moment'
    var acc = require('../utils/float.js');
    export default {
        components:{
            imagesView,
        },
        data() {
            return {
                tableData: [],
                loading:false,
                pageIndex:1,
                total:null,
                custName:"",
                custTell:"",
                custCertificates:"",
                historyOverdueDay:"",
                custChannelId:"",
                pageSize:10,
                isdonwload:false,
                removeId:"",
                custName:"",
                custTell:"",
                custCertificates:"",
                historyOverdueDay:"",
                custChannelId:"",
                show_modal_data:false,
                show_modal_drop_lift:false,
                creditlimit:"",
                tableDataList:[],
                loading1:false,
                userId:"",
                show_modal_drop_lifts:false,
                creditlimits:"",
                isShowBtn:false,
                istrue0:false,
                istrue1:false,
                isSearch:false,
                allLoading:false,
            }
        },
        computed:{
            ...mapGetters([
                'localInfo',
            ]),
        },
        methods:{
            handleCurrentChangeone(val) {
                console.log(`当前页: ${val}`);
                this.pageIndex=val;
                this.ininList()
            },
            search(){
                this.pageIndex=1;
                this.ininList()
                this.isSearch=true
                if(this.custName||this.custTell||this.custCertificates||this.custChannelId||this.historyOverdueDay){
                  this.isShowBtn=true
                }else{
                  this.isShowBtn=false
                }
                
            },
            refresh(){
                this.pageIndex=1;
                this.clearFn()
                this.ininList()
            },
            ccn(row, column, cellValue){
                if(!cellValue){
                    return '--'
                }else{
                    return cellValue
                }
            },
            //记录
            showData(item){
                this.show_modal_data=true;
                let msg = {
                  userId:item.userId
                }
                this.loading1=true
                riskControllerApi.riskGetUserOperaLogoList(msg)
                .then(result=>{
                    console.log(result)
                    this.tableDataList=result
                    this.loading1=false
                   /* this.pageIndex=result.page.pageNumber
                    this.total=result.page.totalRow*/
                })
                .catch(error => {
                    console.error(error)
                    this.loading1=false
                })
            },
            //提交修改额度
            submitAmount(){
              let msg ={
                  reportAmount:this.creditlimit,
                  userId:this.userId,
              }
                riskControllerApi.riskRaiseUserAmount(msg)
                .then(result=>{
                    this.show_modal_drop_lift=false;
                    this.pageIndex=1
                    this.ininList()
                })
                .catch(error => {
                    console.error(error)
                    this.show_modal_drop_lift=false;
                })
            },
            //批量处理提交修改额度
            submitAmounts(){
              let msg ={
                  reportAmount:this.creditlimits,
                  userId:this.userId,
                  name:this.custName,
                  phone:this.custTell,
                  idCard:this.custCertificates,
                  lendTimes:this.custChannelId,
                  historyOverDays:this.historyOverdueDay,
              }
                this.allLoading=true
                riskControllerApi.riskBatchRaiseUserAmount(msg)
                .then(result=>{
                    this.show_modal_drop_lifts=false;
                    this.allLoading=false
                    this.pageIndex=1
                    this.ininList()
                })
                .catch(error => {
                    console.error(error)
                    this.allLoading=false
                })
            },
            //批量处理额度弹窗取消
            diaCloses(){
              this.show_modal_drop_lifts=false
              this.creditlimits=""
            },
            //批量处理
            batchProcessing(){
              this.show_modal_drop_lifts=true
              this.creditlimits=""
            },
            //降/提额
            addBlacklist(item){
              this.show_modal_drop_lift=true;
              this.creditlimit=""
              this.userId=item.userId
              
            },
            //额度弹窗取消
            diaClose(){
              this.show_modal_drop_lift=false
              this.creditlimit=""
            },
            ccndivided(row, column, cellValue){
                if(!cellValue){
                    return '--'
                }else{
                   return cellValue/100
                }
                //return cellValue
            },

            time(row, column, cellValue){
              if(cellValue){
                return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
              }else{
                return '--'
              }
            },
            //清楚搜索条件
            clearFn(){
                this.custName=""
                this.custTell=""
                this.custCertificates=""
                this.custChannelId=""
                this.historyOverdueDay=""
                this.isShowBtn=false
            },

            //初始化函数
            ininList(){
                let msg = {
                  pageIndex:this.pageIndex,
                  pageSize:this.pageSize,
                  name:this.custName,
                  phone:this.custTell,
                  idCard:this.custCertificates,
                  lendTimes:this.custChannelId,
                  historyOverDays:this.historyOverdueDay,
                }
                this.loading=true
                riskControllerApi.riskGetLendRecordUserInfoList(msg)
                .then(result=>{
                    console.log(result)
                    this.tableData=result.page.list
                    this.loading=false
                    this.pageIndex=result.page.pageNumber
                    this.total=result.page.totalRow
                    
                })
                .catch(error => {
                    console.error(error)
                    this.loading=false
                })
            },
        },
        mounted(){

        },
        created(){
            this.ininList()
            
        },
        watch:{
                custName(curVal,oldVal){
　　　　　　　　　　console.log(curVal+"//"+oldVal);
                    if(this.isSearch){
                        if(curVal||this.custTell||this.custCertificates||this.custChannelId||this.historyOverdueDay){
                          this.isShowBtn=true
                        }
                        if(!curVal||curVal!=oldVal){
                            this.isShowBtn=false
                            this.isSearch=false
                        }
                    }else{
                      this.isShowBtn=false
                    }
                    
　　　　　　　　},
                custTell(curVal,oldVal){
                  if(!curVal||curVal!=oldVal){
                            this.isShowBtn=false
                            this.isSearch=false
                        }
　　　　　　　　},
                custCertificates(curVal,oldVal){
                  if(!curVal||curVal!=oldVal){
                            this.isShowBtn=false
                            this.isSearch=false
                        }
　　　　　　　　},
                custChannelId(curVal,oldVal){
                  if(!curVal||curVal!=oldVal){
                            this.isShowBtn=false
                            this.isSearch=false
                        }
　　　　　　　　},
                historyOverdueDay(curVal,oldVal){
                  if(!curVal||curVal!=oldVal){
                            this.isShowBtn=false
                            this.isSearch=false
                        }
　　　　　　　　},
　　　　　　　　
　　　　　　},
    }
</script>
<style>
    #customer-quota .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
      font-weight: normal;
    }
    #customer-quota .el-card__body{
      padding: 0px 20px 0px 20px;
    }
    #customer-quota .el-button{
        line-height: 14px;
        height: 40px;
    }
    #customer-quota .el-button+.el-button{
      margin-left: 0;
    }
    #customer-quota .el-button [class*=el-icon-]+span{
      margin-left: 2px;
    }
    #customer-quota .el-tabs__item{
      font-size: 16px;
    }
    #customer-quota .el-table1::before{
      height: 0;
    }
    #customer-quota .el-date-editor .el-range-separator{
        line-height: 40px!important;
        height: 40px!important;
    }
    #customer-quota .el-date-editor .el-range__icon{
        line-height: 40px!important;
        height: 40px!important;
    }
    #customer-quota .el-date-editor--datetimerange.el-input__inner{
      width: 428px;
    }
    #customer-quota .el-dialog{
      padding: 20px;
    }
    #customer-quota .el-dialog__header{
      border-bottom: 1px solid #dcdfe6;
      padding: 0px 0px 20px;
    }
    #customer-quota .el-dialog__body{
      padding: 0;
      margin-top: 20px;
    }
</style>
<style lang="scss" scoped>

    #customer-quota{
        font-weight: normal;
        .box-card{
            margin:20px 0 20px 0!important;
            padding-bottom:20px;
        }
        .box-card1{
          padding-bottom: 0;
        }

    }
   #customer-quota .el-breadcrumb{
    margin-top: 30px;
        font-size: 16px;
   }
   .header-item{
        margin-right:10px;
        min-width:240px;
        height:40px;
        margin-top:20px;
        float: left;
    }
    .header-item-left,.header-item-right{
        float: left;
    }
    .header-item-right{
        width:194px;
    }
    .header-item-left{
        height:40px;
        line-height: 40px;
        margin-right: 10px;
    }
  .mr24{
    margin-right: 10px;
  }
  .header-top{
    width: 68%;
     height:12px;
  }
  .header-button{
    height:40px;
    float: left;
    margin-top:20px;
    
  }
  .header-button1{
    height:40px;
    margin:0 auto;
    margin-top:20px;
    margin-bottom:20px;
  }
  .pan{
      margin-top:10px;
      margin-right:10px;
  }
  .pic{
    display: block;
  }
  .tit-header{
    height:40px;
    line-height: 40px;
  }
  .titfl{
    float: left;
  }
  .green{
    color: green;
  }
  .red{
    color: red;
  }
  .ml20{
    margin-top:12px;
  }
  .elpa{
    width:1386px;
    margin:0 auto;
  }
  .header-item-right1{
    width:235px;
  }
  .btn-l,.btn-r{
    float: left;
  }
  .btn-l{
    margin-right:10px;
  }
  .red{
    color:#f56c6c;
  }
  .dia-item{
    width:100%;
    height:40px;
    margin-bottom: 20px;
    p{
      line-height: 40px;
    }
  }
  .dia-footer{
    height:40px;
  }
  .fr,.fr1{
    float: right;
  }
  .fr{
    margin-left:20px;
  }
</style>
